<template>
  <div class="product-container">
    <el-row>
      <el-col :span="24">
        <normal-filter :filterProps="filterProps" />
      </el-col>
    </el-row>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" @click="addContent"
        >添加文章</el-button
      >
    </el-row>
    <el-row class="table-container">
      <Table
        :columnProps="columnProps"
        :tableData="tableData"
        :showHandle="true"
        :pagination="pagination"
        @currentPage="goCurrent"
        @sizeChange="sizeChange"
        @delete="del"
        @modify="modify"
      >
        <template slot-scope="scopes" slot="isHot">
          <el-switch
            v-model="scopes.scope.row.isHot"
            @change="switchIsHot(scopes.scope.row)"
          >
          </el-switch>
        </template>
      </Table>
    </el-row>
  </div>
</template>

<script>
import normalFilter from "@/components/NormalFilter";
import Table from "@/components/Table";
import { getList, update, delItem } from "@/api/article";
import { getList as getCombList } from "@/api/productComb";
import { pagination, page } from "@/utils/enumConfig";
import { Message } from "element-ui";
import { ProudctType } from "@/utils/enumConfig";

export default {
  name: "article",
  components: {
    normalFilter,
    Table,
  },
  data() {
    const filterProps = {
      filterItems: [
        {
          type: "input",
          id: "title",
          title: "文章标题",
          placeholder: "请输入",
        },
      ],
      onFilterChange: (value) => {
        this.filterParam = value;
        this.getList({
          ...value,
          ...page,
        });
      },
    };
    const columnProps = [
      {
        title: "文章标题",
        dataIndex: "title",
        key: "title",
      },
      {
        title: "是否热销",
        dataIndex: "isHot",
        key: "isHot",
        render: (record) => {
          return record.isHot ? "是" : "否";
        },
      },
      {
        title: "封面图",
        dataIndex: "imageUrl",
        key: "imageUrl",
        render: (record) => {
          return `<img style="width:150px;height:80px;object-fit:contain" src="${record.coverImage}"></img>`;
        },
      },
      {
        title: "是否热门",
        dataIndex: "isHot",
        key: "isHot",
        width: 120,
        slot: true,
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
      },
    ];
    return {
      filterProps,
      columnProps,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      filterParam: null,
    };
  },
  async created() {
    // await this.setCombFilter();
    let { pageIndex } = this.pagination;
    let param = {
      current: pageIndex,
    };
    this.getList(param);
  },
  methods: {
    addContent() {
      this.$router.push("/article/add");
    },
    goCurrent(currentIndex) {
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.getList(param);
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.getList(param);
    },
    modify({ id }) {
      this.$router.push({ path: `/article/update/${id}` });
    },
    async del({ id }) {
      let res = await delItem({ id });
      if (res.code === 1) {
        let { pageIndex } = this.pagination;
        this.getList({
          ...this.filterParam,
          current: 1,
        });
      }
    },
    async getList(param) {
      let { records, size, total, current } = await getList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current,
      };
      records.forEach((item) => {
        item.isHot = item.isHot == 1 ? true : false;
        item.isBanner = item.isBanner == 1 ? true : false;
      });
      this.tableData = records;
    },
    async setCombFilter() {
      let res = await getCombList({ current: 0, size: 1000 });
      if (res) {
        let typeList = res.records;
        let _filterProps = this.filterProps;
        let _filterItems = this.filterProps["filterItems"];
        _filterItems.push({
          type: "select",
          id: "combinationName",
          title: "所属产品组合",
          placeholder: "请选择",
          options: [
            {
              title: "全部",
              key: null,
              value: "",
            },
          ].concat(
            typeList.map((item) => ({
              title: item.name,
              key: item.id,
              value: item.name,
            }))
          ),
        });
        _filterProps["filterItems"] = _filterItems;
        this.$set(this.filterProps, "filterItems", _filterItems);
      }
    },
    //切换是否热门
    async switchIsHot(item) {
      let res = await update({ id: item.id, isHot: item.isHot ? 1 : 0 });
      if (res && res.code === 1) {
        Message({
          message: "状态更新成功！",
          type: "success",
          duration: 1 * 1000,
        });
        this.getList({
          ...this.filterParam,
          current: 1,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product-container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .table-container {
    margin-top: 20px;
  }
}
</style>
